<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品详情页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/index.css" />
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script type="text/javascript" src="js/vant.min.js"></script>
		<script src="js/vue-lazyload.js"></script>
		<script src="html5plus://ready"></script>
		<script src="js/listener_other.js"></script>
		<script src="js/ajax.js"></script>

		<style>			
			.express {
				color: #999;
				padding: 20px 0px 5px 0px;
			}
			.vol-class {
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app" style="overflow-x: hidden;overflow-y: auto;">
			<van-row>
				<van-col span="24">
					<van-cell-group>
						<van-row>
							<van-cell icon="arrow-left" @click="returnPage" title="返回">
						</van-row>
						<van-swipe :autoplay="3000" indicator-color="read">
							<van-swipe-item v-for="img in SwipeImages">
								<img :src="img.src" width="100%" onerror="javascript:this.src='img/2.jpg'" />
							</van-swipe-item>
						</van-swipe>
						</van-cell>
						<van-cell>
							<div style="font-size: 18px; font-weight: bolder;" v-text="detail.Name"></div>
							<div style="font-size: 24px; color: red; padding-top: 20px;">￥<span v-text="detail.MarketPrice"></span></div>
							<van-col span="10" class="express">快递：免运费</van-col>
							<van-col span="14" class="express">销量290</van-col>
						</van-cell>
						<van-cell style="background-color: #F3F3F6;">
							<van-col class="vol-class" span="8">☞正品保证</van-col>
							<van-col class="vol-class" span="8">☞极速退款</van-col>
							<van-col class="vol-class" span="8">☞两天内发货</van-col>
						</van-cell>
					</van-cell-group>
					<div style="height: 15px;background-color: #E8E8E8;"></div>
					<van-panel title="商品详情">
						<van-list>
							<van-cell-swipe v-for="pdd in proDe">
								<van-cell>
									<img :src="pdd" onerror="this.src='../img/product_default.jpg'" style="width: 100%;" />
								</van-cell>
							</van-cell-swipe>
						</van-list>
					</van-panel>
				</van-col>
				<van-col span="24">
					<van-goods-action>
						<van-goods-action-mini-btn v-show="isCollected" style="width: 25%; color: #FF0000;" icon="like" text="已收藏" @click="collected"></van-goods-action-mini-btn>
						<van-goods-action-mini-btn v-show="!isCollected" style="width: 25%;" icon="like-o" text="收藏" @click="collect"></van-goods-action-mini-btn>
						<van-goods-action-big-btn @click="joinCar" v-if="addShopcartCount==0">加入购物车</van-goods-action-big-btn>
						<van-goods-action-big-btn v-else @click="joinCar">加入购物车X<span v-text="addShopcartCount"></span></van-goods-action-big-btn>
						<van-goods-action-big-btn text="立即购买" @click="goShopping" primary></van-goods-action-big-btn>
					</van-goods-action>
				</van-col>
			</van-row>
		</div>
	</body>
	<script type="text/javascript">
		var Key = localStorage.getItem("Key");
		var Gid = plus.webview.currentWebview().productId;
		var vm = new Vue({
			el: "#app",
			data: {
				detail: "", //商品轮播图
				isCollected: false,
				phone: "",
				addShopcartCount: 0,
				pid: 0,
				proDe: ["img/1.png", "img/2.png", "img/3.png",
					"img/4.png", "img/5.png"
				] ,//详情
				SwipeImages:[]

			},
			methods: {
				joinCar() { //添加购物车
					if (Key == null) {
						plus.webview.create("Center/login.html", "login").show();
					} else {
						vm.$toast.success("加入购物车");
						vm.phone = localStorage.getItem("Phone");
						var goodsArr = [{
							goodsId: vm.detail.Id,
							buyCount: 1
						}];
						var goodsObj = {
							goodsId: vm.detail.Id,
							buyCount: 1
						};
						var newArr;
						if (localStorage.getItem(vm.phone) == null) { //如果购物车里面没有任何东西
							localStorage.removeItem(vm.phone);
							localStorage.setItem(vm.phone, JSON.stringify(goodsArr));
							vm.addShopcartCount = 1; //显示此商品在购物车内的数量
						} else { 
							//购物车里有东西
							newArr = JSON.parse(localStorage.getItem(vm.phone)); //购物车里面的商品
							for (var i = 0; i < newArr.length; i++) {  //便利购物车
								if (newArr[i].goodsId == vm.detail.Id) { //如果购物车里面有此商品
									newArr[i].buyCount += 1; //商品数量+1
									localStorage.removeItem(vm.phone);
									localStorage.setItem(vm.phone, JSON.stringify(newArr)); //
									vm.addShopcartCount = newArr[i].buyCount; //显示此商品在购物车内的数量
									return;
								}
							}
							//购物车里没有此商品
							newArr.push(goodsObj); //向购物车内添加商品
							localStorage.removeItem(vm.phone);
							localStorage.setItem(vm.phone, JSON.stringify(newArr)); //
							vm.addShopcartCount = 1; //显示此商品在购物车内的数量
						}
						console.log(newArr)
						plus.webview.getWebviewById("GouwuChe").reload()
					}
				},
				//立即购买
				goShopping() { 
					if (Key == null) {
						plus.webview.create("Center/login.html", "login").show();
					} else {
						plus.webview.create("Account.html", "Account", {}, {
							pid: this.pid,
							isShow: true,
							address: true
						}).show();
					}
				},
				returnPage() { //返回
					plus.webview.hide(plus.webview.currentWebview());
				},

				collect() { //加入收藏
					if (Key == null) {
						plus.webview.create("Center/login.html", "login").show();
					} else {
						ajax({
							url: "http://dsapi.ysd3g.com/API/CollectGoods",
							dataType: "jsonp",
							data: {
								Key: Key,
								goodsId: vm.detail.Id,

							},
							success(res) {
								console.log(res)
								if (res.Error) {
									vm.$toast.success(`收藏成功`);
									vm.isCollected = true;
								} else {
									vm.$toast.success(res.Msg);							
								}								 
							}
						})
					}
				},
				collected() {
					//取消收藏
					var Key = localStorage.getItem("Key");
					ajax({
						url: "http://dsapi.ysd3g.com/api/cancelCollectGoods",
						dataType: "jsonp",
						data: {
							Key: Key,
							goodsId: vm.detail.Id
						},
						success(res) {
							if (!res.Error) {
								vm.$toast.success("已取消收藏");
								vm.isCollected = false;
							} else {
								vm.$toast.fail(res.Msg);
							}
						}
					});
				},

			},
			mounted() {
				ajax({ //产品详情
					url: "http://dsapi.ysd3g.com/API/GoodsDetail",
					dataType: "jsonp",
					data: {
						gId: Gid,
					},
					success(res) {
						vm.detail = res.Detail;
						vm.SwipeImages = res.Detail.SwipeImages
					}
				});
				if (localStorage.getItem("key") != null) { //如果key值不为空查看是否已收藏
					ajax({
						url: "http://dsapi.ysd3g.com/API/MyGoodsCollectList",
						dataType: "jsonp",
						data: {
							p: 1,
							key: localStorage.getItem("key")
						},
						success(res) {
							for (var i = 0; i < res.Data.length; i++) {
								if (res.Data[i].GoodsId == Gid) {
									vm.isCollected = true;
								}
							}
						}
					})
				}
				var spg = localStorage.getItem("Phone"); //购物车内的商品
				var shopcartGoods = localStorage.getItem(spg);
				if (shopcartGoods != null) {
					for (var i = 0; i < shopcartGoods.length; i++) { //遍历购物车
						if (shopcartGoods[i].goodsId == Gid) { //如果购物车里面有此商品
							this.addShopcartCount = shopcartGoods[i].buyCount;
						}
					}
				}
			},
		});
	</script>

</html>